<template>
  <div class="main">
    <div class="content">
      <div class="top">
        <div class="button">
          扫描小票二维码
        </div>
      </div>
      <div class="middle">
        <div class="input_wrap">
          <input class="input_text" v-model="shopId" placeholder="请输入小票流水号" type="number">
        </div>
        <div class="button" @click="search">搜索</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BeforeSales',
  data () {
    return {
      shopId: null
    }
  },
  mounted () {
  },
  methods: {
    async search () {
      if (this.shopId == null) {
        alert('请输入流水号或扫描小票')
        return
      }
      this.$router.push({
        name: 'SalesInformation',
        query: {
          shopId: this.shopId
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .main{
    width: 100%;
    height: calc(100% - 1px);
    background: #FFFFFF;
    border-top: 1px solid transparent;
    .content {
      width: 1000px;
      margin: 0 auto;
      .top {
        margin: 200px auto 0;
        width: 800px;
        height: 50px;
        /*border: 2px solid red;*/
        .button{
          width: 100px;
          height: 50px;
          margin: 0 auto;
          border: 1px solid black;
          border-radius: 5px;
          line-height: 50px;
          text-align: center;
          font-size: 14px;
        }
      }
      .middle{
        margin: 20px auto 0;
        width: 400px;
        height: 50px;
        /*border: 2px solid red;*/
        position: relative;
        .input_wrap {
          width: 300px;
          height: 50px;
          /*border: 1px solid black;*/
          .input_text {
            width: 290px;
            height: 20px;
            padding: 5px;
            text-align: center;
            line-height: 20px;
          }
        }
        .button{
          position: absolute;
          top: 0px;
          left: 310px;
          width: 80px;
          height: 30px;
          margin: 0 auto;
          border: 1px solid black;
          border-radius: 5px;
          line-height: 30px;
          text-align: center;
          font-size: 14px;
        }
      }
    }
  }

</style>
